.darw-box {
	position: absolute;
	left: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0);
	z-index: 10;
	display: none;
	overflow: hidden;
	&.show {
		display: block;
		left: 0;
	}
	.darw-inner {
		height: 100%;
		position: relative;
		overflow: hidden;
		max-width: 100%;
		transform: translate3d(0, 0, 0);
		transition: all 0.4s ease-in-out;
		display: flex;
		&.right {
			transform: translateX(100%);
		}
		&.left {
			transform: translateX(-100%);
			align-items: stretch;
		}
		&.top {
			transform: translateY(-100%);
			align-items: stretch;
			flex-flow: column;
		}
		&.bottom {
			transform: translateY(100%);
			align-items: stretch;
			flex-flow: column;
		}
		&.column {
			align-items: stretch;
			flex-flow: column;
		}
		.children {
			background: #fff;
		}
		.darw-before,
		.darw-after {
			flex: 1;
		}
	}
}
